<template>
    <div>
        <indexHead/>
        <!-- 列表主体 start -->
		<div class="list w1210 bc mt10">
			<!-- 面包屑导航 start -->
			<div class="breadcrumb">
				<h2>当前位置：<a href="">首页</a> > <a href="">电脑、办公</a></h2>
			</div>
			<!-- 面包屑导航 end -->

			<!-- 左侧内容 start -->
			<div class="list_left fl mt10">
				<!-- 分类列表 start -->
				<div class="catlist">
					<h2>电脑、办公</h2>
					<div class="catlist_wrap">
						<div class="child">
							<h3 class="on"><b></b>电脑整机</h3>
							<ul>
								<li><a href="">笔记本</a></li>
								<li><a href="">超极本</a></li>
								<li><a href="">平板电脑</a></li>
							</ul>
						</div>

						<div class="child">
							<h3><b></b>电脑配件</h3>
							<ul class="none">
								<li><a href="">CPU</a></li>
								<li><a href="">主板</a></li>
								<li><a href="">显卡</a></li>
							</ul>
						</div>

						<div class="child">
							<h3><b></b>办公打印</h3>
							<ul class="none">
								<li><a href="">打印机</a></li>
								<li><a href="">一体机</a></li>
								<li><a href="">投影机</a></li>
							</ul>
						</div>

						<div class="child">
							<h3><b></b>网络产品</h3>
							<ul class="none">
								<li><a href="">路由器</a></li>
								<li><a href="">网卡</a></li>
								<li><a href="">交换机</a></li>
							</ul>
						</div>

						<div class="child">
							<h3><b></b>外设产品</h3>
							<ul class="none">
								<li><a href="">鼠标</a></li>
								<li><a href="">键盘</a></li>
								<li><a href="">U盘</a></li>
							</ul>
						</div>
					</div>

					<div style="clear:both; height:1px;"></div>
				</div>
				<!-- 分类列表 end -->

				<div style="clear:both;"></div>

				<!-- 新品推荐 start -->
				<div class="newgoods leftbar mt10">
					<h2><strong>新品推荐</strong></h2>
					<div class="leftbar_wrap">
						<ul>
							<li>
								<dl>
									<dt><a href=""><img src="~/assets/images/list_hot1.jpg" alt="" /></a></dt>
									<dd><a href="">美即流金丝语悦白美颜新年装4送3</a></dd>
									<dd><strong>￥777.50</strong></dd>
								</dl>
							</li>

							<li>
								<dl>
									<dt><a href=""><img src="~/assets/images/list_hot2.jpg" alt="" /></a></dt>
									<dd><a href="">领券满399减50 金斯利安多维片</a></dd>
									<dd><strong>￥239.00</strong></dd>
								</dl>
							</li>

							<li class="last">
								<dl>
									<dt><a href=""><img src="~/assets/images/list_hot3.jpg" alt="" /></a></dt>
									<dd><a href="">皮尔卡丹pierrecardin 男士长...</a></dd>
									<dd><strong>￥1240.50</strong></dd>
								</dl>
							</li>
						</ul>
					</div>
				</div>
				<!-- 新品推荐 end -->

				<!--热销排行 start -->
				<div class="hotgoods leftbar mt10">
					<h2><strong>热销排行榜</strong></h2>
					<div class="leftbar_wrap">
						<ul>
							<li></li>
						</ul>
					</div>
				</div>
				<!--热销排行 end -->

				<!-- 最近浏览 start -->
				<div class="viewd leftbar mt10">
					<h2><a href="">清空</a><strong>最近浏览过的商品</strong></h2>
					<div class="leftbar_wrap">
						<dl>
							<dt><a href=""><img src="~/assets/images/hpG4.jpg" alt="" /></a></dt>
							<dd><a href="">惠普G4-1332TX 14英寸笔记...</a></dd>
						</dl>

						<dl class="last">
							<dt><a href=""><img src="~/assets/images/crazy4.jpg" alt="" /></a></dt>
							<dd><a href="">直降200元！TCL正1.5匹空调</a></dd>
						</dl>
					</div>
				</div>
				<!-- 最近浏览 end -->
			</div>
			<!-- 左侧内容 end -->

			<!-- 列表内容 start -->
			<div class="list_bd fl ml10 mt10">
				<!-- 热卖、促销 start -->
				<div class="list_top">
					<!-- 热卖推荐 start -->
					<div class="hotsale fl">
						<h2><strong><span class="none">热卖推荐</span></strong></h2>
						<ul>
							<li>
								<dl>
									<dt><a href=""><img src="~/assets/images/hpG4.jpg" alt="" /></a></dt>
									<dd class="name"><a href="">惠普G4-1332TX 14英寸笔记本电脑 （i5-2450M 2G 5</a></dd>
									<dd class="price">特价：<strong>￥2999.00</strong></dd>
									<dd class="buy"><span>立即抢购</span></dd>
								</dl>
							</li>

							<li>
								<dl>
									<dt><a href=""><img src="~/assets/images/list_hot3.jpg" alt="" /></a></dt>
									<dd class="name"><a href="">ThinkPad E42014英寸笔记本电脑</a></dd>
									<dd class="price">特价：<strong>￥4199.00</strong></dd>
									<dd class="buy"><span>立即抢购</span></dd>
								</dl>
							</li>

							<li>
								<dl>
									<dt><a href=""><img src="~/assets/images/acer4739.jpg" alt="" /></a></dt>
									<dd class="name"><a href="">宏碁AS4739-382G32Mnkk 14英寸笔记本电脑</a></dd>
									<dd class="price">特价：<strong>￥2799.00</strong></dd>
									<dd class="buy"><span>立即抢购</span></dd>
								</dl>
							</li>
						</ul>
					</div>
					<!-- 热卖推荐 end -->

					<!-- 促销活动 start -->
					<div class="promote fl">
						<h2><strong><span class="none">促销活动</span></strong></h2>
						<ul>
							<li><b>.</b><a href="">DIY装机之向雷锋同志学习！</a></li>
							<li><b>.</b><a href="">京东宏碁联合促销送好礼！</a></li>
							<li><b>.</b><a href="">台式机笔记本三月巨惠！</a></li>
							<li><b>.</b><a href="">富勒A53g智能人手识别鼠标</a></li>
							<li><b>.</b><a href="">希捷硬盘白色情人节专场</a></li>
						</ul>

					</div>
					<!-- 促销活动 end -->
				</div>
				<!-- 热卖、促销 end -->

				<div style="clear:both;"></div>

				<!-- 商品筛选 start -->
				<div class="filter mt10">
					<h2><a href="">重置筛选条件</a> <strong>商品筛选</strong></h2>
					<div class="filter_wrap">
						<dl v-if="conditionResult.brand_list && conditionResult.brand_list.length>0">
							<dt>品牌：</dt>
							<dd class="cur"><a href="">不限</a></dd>
							<dd v-for="(v,k) in conditionResult.brand_list" :key="k"><a href="" @click.prevent="brandSearch(v.id)"><img :src="v.logo" /></a></dd>
						</dl>

						<dl v-if="conditionResult.category_goods && conditionResult.category_goods.length>0">
							<dt>分类：</dt>
							<dd class="cur"><a href="">不限</a></dd>
							<dd v-for="(v,k) in conditionResult.category_goods" :key="k"><a :href="'list.html?cart_id='+v.id">{{v.category_name}}</a></dd>
						</dl>

						<dl v-if="conditionResult.spec_list && conditionResult.spec_list.length>0" v-for="(v,k) in conditionResult.spec_list" :key="k">
							<dt>{{v.spec_name}}：</dt>
							<dd class="cur"><a href="">不限</a></dd>
							<dd v-for="(v1,k1) in v.options" :key="k1"><a href="" @click.prevent="specSearch(v.id,v1.option_name,$event)">{{v1.option_name}}</a></dd>
						</dl>
					</div>
				</div>
				<!-- 商品筛选 end -->

				<div style="clear:both;"></div>

				<!-- 排序 start -->
				<div class="sort mt10">
					<dl>
						<dt>排序：</dt>
						<dd :class="{cur:searchMap.sort_by=='xl'}"><a href="" @click.prevent="sortSearch('xl')">销量</a></dd>
						<dd v-if="searchMap.sort_way=='desc'" :class="{cur:searchMap.sort_by=='jg'}"><a href="" @click.prevent="sortSearch('jg')">价格↑</a></dd>
						<dd v-if="searchMap.sort_way=='asc'" :class="{cur:searchMap.sort_by=='jg'}"><a href="" @click.prevent="sortSearch('jg')">价格↓</a></dd>
						<dd :class="{cur:searchMap.sort_by=='pl'}"><a href="" @click.prevent="sortSearch('pl')">评论数</a></dd>
						<dd :class="{cur:searchMap.sort_by=='sj'}"><a href="" @click.prevent="sortSearch('sj')">上架时间</a></dd>
						价格：
						<input type="text" style="width: 50px;" v-model="searchMap.min_price" placeholder="¥">-
						<input type="text" style="width: 50px;" v-model="searchMap.max_price" placeholder="¥">
						<input type="button" style="width: 50px;" @click.prevent="searchGoods" value="搜索" placeholder="¥">
					</dl>
				</div>
				<!-- 排序 end -->

				<div style="clear:both;"></div>

				<!-- 商品列表 start-->
				<div class="goodslist_search mt10">
					<ul>
						
						<li v-for="(v,k) in sList" :key="k">
							<router-link :to="`/goods/${v.id}`">
								<dl>
									<dt><a :href="'goods.html?skuid='+v.id"><img :src="v.img" alt="" /></a></dt>
									<dt><a href="">{{v.goods_name}}</a></dt>
									<dt><strong>￥{{v.price}}</strong></dt>
									<dt><a href=""><em>已有{{v.comment_count}}人评价</em></a></dt>
								</dl>
							</router-link>
						</li>
					</ul>
				</div>
				<!-- 商品列表 end-->

				<!-- 分页信息 start -->
				<pagination :total_page="total_page" :page="page" @page_changed="pageChanged"></pagination>
				<!-- 分页信息 end -->

			</div>
			<!-- 列表内容 end -->
		</div>
		<!-- 列表主体 end-->
    </div>
</template>

<script>
import '~/assets/style/list.css'
import '~/assets/style/common.css'

import indexHead from '~/components/head.vue'
import pagination from '~/components/pagination.vue'
import axios from 'axios'

import searchAip from '~/api/good'
export default {
    components:{
        indexHead,
        pagination
    },
    asyncData(){
       return axios.all([ searchAip.searchList({}), searchAip.searchCondition()])
        .then(axios.spread(function (res1, res2) {
            // 两个请求现在都执行完成
            return{
                sList:res1.data.data,
                total_count:res1.data.count,
                total_page:Math.ceil(res1.data.count / 30),
                conditionResult: res2.data
            }
        }));
    },
    data(){
        return{
            //返回结果对象
			searchResult: {},
			//条件参数封装对象
			conditionResult: {},
			//搜索商品列表
			// sList: [],
			total_count: 0,
			//每页显示的条数
			per_page: 30,
			//当前页
			page: 1,
			//总页码
			// total_page: 0,
			is_last:true,
			is_first:false,
			//搜索参数
			searchMap: {
				//根据关键词进行搜索
				// keyword: sessionStorage.getItem("keyword"),
				//根据分类id进行搜索
				//list.html?cart_id=2
				// cartId: location.search ? window.location.search.match(/cart_id=(\d+)/)[1] : '',
				//分类名称
				catgory_name: '',
				//品牌参数
				brand_id: 1,
				//规格列表
				spec_list: [],
				//每页显示的条数
				per_page: 30,
				//当前页
				page: 1,
				//价格
				price: '',
				//默认排序
				sort_by: 'xl',
				sort_way: 'desc',
				min_price: '',
				max_price: ''

			}
        }
    },
    methods:{
        //根据品牌检索商品
			brandSearch: function (brandId) {
				//把传递的参数放入数据区参数上面
				this.searchMap.brand_id = brandId;
				//调用搜索方法
				this.searchGoods();
			},
			//规格搜索
			specSearch: function (key, value, $event) {

				//获取点击事件发生的对象:$event.target
				//JQuery知识
				$($event.target).parent().addClass("cur").siblings().removeClass("cur");

				//把选中的规格参数放入参数对象searchMap中spec_list集合
				this.searchMap.spec_list.push({ spec_id: key, option_name: value });
				//调用搜索方法实现搜索
				this.searchGoods();
			},

			//排序
			sortSearch: function (value) {
				//把页面传递的参数封装到searchMap中sort_by排序字段中
				this.searchMap.sort_by = value;

				//判断是否是价格排序
				if (this.searchMap.sort_by == 'jg') {
					//给排序方式进行赋值
					this.searchMap.sort_way = this.searchMap.sort_way == 'desc' ? 'asc' : 'desc';
				} else {
					//如果不是价格，默认采用降序方式排列
					//销量
					//评论
					//上架时间
					this.searchMap.sort_way = 'desc';
				}

				//调用搜索方法，实现搜索
				this.searchGoods();
			},
			//分页函数
			pageChanged:function(v){
				//把当前需要查询的页码赋值当前数据区域page
				this.page = v; //把当前值和组件中值进行绑定
				this.searchMap.page = v; //把此参数传递到后台进行搜索
				//调用搜索方法进行搜索
				this.searchGoods();
			}
    }

}
</script>

<style>

</style>
